<script>
	import {
		Canvas,
		Scene,
		PerspectiveCamera,
		DirectionalLight,
		AmbientLight,
		BoxBufferGeometry,
		Mesh,
		MeshStandardMaterial,
		WebGLRenderer,
		TextureLoader,
		MeshBasicMaterial,
		SphereGeometry,
		Vector3,
		MathUtils
	} from 'svelthree';

	const loader = new TextureLoader();
	const texture = loader.load('../img/texture/1.jpg');

	let material1 = new MeshBasicMaterial({
		map: texture
	});
	let geometry1 = new SphereGeometry(1, 32, 24);
	import anime from 'animejs';

	let cubeGeometry = new BoxBufferGeometry(0.8, 0.8, 0.8);
	cubeGeometry.translate(0, 0, 0);

	cubeGeometry.rotateY(MathUtils.degToRad(180));
	let cubeMaterial = new MeshStandardMaterial();
	import { rotateCube } from '$lib/webgl/ts/animations';

	function handleOnClick(e) {
		console.log("Hi, I was triggered from app's scope!");
	}

	const triggerOnClickAni = (e) => {
		let obj = e.detail.target;
		let animetime = anime.timeline({
			easing: 'easeOutElastic(1.5,.3)',
			duration: 600,
			direction: 'alternate'
			// loop: true
		});
		animetime
			// .add({
			//   targets: obj.material,
			//   opacity: 1,
			// })
			.add(
				{
					targets: obj.rotation,
					change: function () {
						obj.rotation.y += 0.1;
						// obj.rotation.z += 0.1
						// obj.rotation.x += 0.1
					}
				},
				0
			)
			.add({
				targets: obj.scale,
				x: 1.5,
				y: 1.5,
				z: 1.2
			})

			.add(
				{
					targets: obj.material.color,
					b: 0.33,
					g: 1,
					r: 0.33
				},
				0
			)
			.add(
				{
					targets: obj.position,
					z: 0.51
					// y: 2
				},
				'-=600'
			)
			.add(
				{
					targets: obj.position,
					x: -1,
					y: -0.5
				},
				600
			)
			.add(
				{
					targets: obj.material,
					opacity: 0.2
				},
				'-=600'
			);
	};

	const triggerOnOverAni = (e) => {
		let obj = e.detail.target;
		let animetime = anime.timeline({
			easing: 'easeOutElastic(1.5,.3)',
			duration: 600

			// loop: true
		});
		animetime

			.add({
				targets: obj.material.color,
				b: 0.33,
				g: 1,
				r: 0.93
			})
			.add(
				{
					targets: obj.scale,
					x: 0.8,
					y: 1.25,
					z: 0.8,
					easing: 'cubicBezier(.02,1.84,.79,.96)'
				},
				0
			);
	};

	const triggerOnOutAni = (e) => {
		let obj = e.detail.target;

		anime({
			targets: obj.scale,
			x: 1,
			y: 1,
			z: 1,
			easing: 'cubicBezier(.02,1.84,.79,.96)'
		});
	};

	function onPointerMove(e) {
		let obj = e.detail.target;

		let unpr = new Vector3().copy(e.detail.unprojected);
		let unprwtl = obj.worldToLocal(unpr).add(new Vector3(0, 0, 1));
		obj.lookAt(unprwtl);
	}
</script>

<Canvas let:sti w={1200} h={600} interactive>
	<Scene {sti} let:scene id="scene1">
		<PerspectiveCamera {scene} id="cam1" pos={[0, 0, 5]} lookAt={[0, 0, 0]} />
		<AmbientLight {scene} intensity={1.25} />
		<DirectionalLight {scene} pos={[3, 3, 3]} />

		<Mesh
			{scene}
			geometry={geometry1}
			material={material1}
			pos={[2, -0.51, 1]}
			rot={[0, 0, 0]}
			scale={[1, 1, 1]}
			animation={rotateCube}
			aniauto
		/>
		<Mesh
			{scene}
			geometry={cubeGeometry}
			material={cubeMaterial}
			mat={{ roughness: 0.5, metalness: 0.5, color: 0xff3e00 }}
			pos={[0, 0, 0]}
			scale={[0.8, 0.8, 0.8]}
			interact
			animation={rotateCube}
			aniauto
			on:click={handleOnClick}
			on:pointermove={onPointerMove}
			onClick={triggerOnClickAni}
			onPointerOver={triggerOnOverAni}
			onPointerLeave={triggerOnOutAni}
		/>
	</Scene>

	<WebGLRenderer {sti} sceneId="scene1" camId="cam1" config={{ antialias: true, alpha: true }} />
</Canvas>
